<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最终数据管理 - 医学知识图谱数据生成</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/common.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/final_datasets.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        {% include 'nav_bar.html' %}
    
    <div class="mt-4">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2><i class="fas fa-database"></i> 最终数据管理</h2>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary" id="tableViewBtn">
                            <i class="fas fa-table"></i> 表格视图
                        </button>
                        <button type="button" class="btn btn-outline-primary active" id="cardViewBtn">
                            <i class="fas fa-th-large"></i> 卡片视图
                        </button>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="row mb-3">
                    <div class="col-lg-2 col-md-3 col-6 mb-2">
                        <div class="stat-card">
                            <div class="stat-value" id="totalCount">0</div>
                            <div class="stat-label">总数据量</div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-6 mb-2">
                        <div class="stat-card">
                            <div class="stat-value" id="filteredCount">0</div>
                            <div class="stat-label">筛选结果</div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-6 mb-2">
                        <div class="stat-card">
                            <div class="stat-value" id="fileCount">0</div>
                            <div class="stat-label">文件数量</div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-6 mb-2">
                        <div class="stat-card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                            <div class="stat-value" id="missingIdCount">0</div>
                            <div class="stat-label">缺少ID数量</div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <div class="d-flex justify-content-end align-items-start flex-column">
                            <!-- 第一行：页面控制 -->
                            <div class="d-flex align-items-center mb-2">
                                <label class="form-label mb-0 me-2">每页显示:</label>
                                <select class="form-select form-select-sm" id="pageSizeSelect" style="width: auto;">
                                    <option value="10">10条</option>
                                    <option value="20" selected>20条</option>
                                    <option value="50">50条</option>
                                    <option value="100">100条</option>
                                    <option value="200">200条</option>
                                </select>
                            </div>
                            <!-- 第二行：操作按钮 -->
                            <div class="d-flex align-items-center flex-wrap action-buttons">
                                <button class="btn btn-success btn-sm me-2 mb-1" id="generateIdsBtn">
                                    <i class="fas fa-fingerprint"></i> 生成ID
                                </button>
                                <button class="btn btn-info btn-sm me-2 mb-1" id="checkDuplicatesBtn">
                                    <i class="fas fa-search"></i> 检查重复
                                </button>
                                <button class="btn btn-danger btn-sm me-2 mb-1" id="cleanDirtyBtn">
                                    <i class="fas fa-trash-alt"></i> 清理脏数据
                                </button>
                                <button class="btn btn-primary btn-sm me-2 mb-1" id="exportBtn">
                                    <i class="fas fa-download"></i> 导出
                                </button>
                                <button class="btn btn-secondary btn-sm mb-1" id="refreshBtn">
                                    <i class="fas fa-refresh"></i> 刷新
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 筛选面板 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-filter"></i> 数据筛选
                            </h5>
                            <div>
                                <button class="btn btn-sm btn-outline-secondary me-2" id="fieldControlBtn">
                                    <i class="fas fa-eye"></i> 字段显示控制
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" id="clearFiltersBtn">
                                    <i class="fas fa-times"></i> 清空筛选
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 文本搜索筛选 -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">问题搜索</label>
                                <input type="text" class="form-control" id="questionFilter" placeholder="搜索问题内容...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">答案搜索</label>
                                <input type="text" class="form-control" id="answerFilter" placeholder="搜索答案内容...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">推理路径搜索</label>
                                <input type="text" class="form-control" id="reasoningFilter" placeholder="搜索推理路径...">
                            </div>
                        </div>

                        <!-- 多选筛选 -->
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label">语言类型</label>
                                <div class="filter-select-container">
                                    <select class="form-select" id="languageFilter" multiple>
                                        <!-- 动态填充 -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">领域标签</label>
                                <div class="filter-select-container">
                                    <select class="form-select" id="domainTagsFilter" multiple>
                                        <!-- 动态填充 -->
                                    </select>
                                    <div class="logic-switch">
                                        <small class="text-muted">逻辑关系：</small>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <input type="radio" class="btn-check" name="domainTagsLogic" id="domainTagsOr" value="or" checked>
                                            <label class="btn btn-outline-primary" for="domainTagsOr">或</label>
                                            <input type="radio" class="btn-check" name="domainTagsLogic" id="domainTagsAnd" value="and">
                                            <label class="btn btn-outline-primary" for="domainTagsAnd">与</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">实体列表</label>
                                <div class="filter-select-container">
                                    <select class="form-select" id="entitiesFilter" multiple>
                                        <!-- 动态填充 -->
                                    </select>
                                    <div class="logic-switch">
                                        <small class="text-muted">逻辑关系：</small>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <input type="radio" class="btn-check" name="entitiesLogic" id="entitiesOr" value="or" checked>
                                            <label class="btn btn-outline-primary" for="entitiesOr">或</label>
                                            <input type="radio" class="btn-check" name="entitiesLogic" id="entitiesAnd" value="and">
                                            <label class="btn btn-outline-primary" for="entitiesAnd">与</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">数据源</label>
                                <div class="filter-select-container">
                                    <select class="form-select" id="sourceFilter" multiple>
                                        <!-- 动态填充 -->
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 字段显示控制面板 -->
                <div class="card mb-3 d-none" id="fieldControlPanel">
                    <div class="card-header">
                        <h6 class="mb-0">字段显示控制</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <strong>选择要显示的字段：</strong>
                                    <div>
                                        <button class="btn btn-sm btn-outline-primary me-2" id="selectAllFields">全选</button>
                                        <button class="btn btn-sm btn-outline-secondary me-2" id="selectNoneFields">全不选</button>
                                        <button class="btn btn-sm btn-outline-success" id="resetDefaultFields">重置默认</button>
                                    </div>
                                </div>
                                <div class="row" id="fieldCheckboxes">
                                    <!-- 动态生成字段复选框 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据展示区域 -->
                <div id="dataDisplayArea">
                    <!-- 表格视图 -->
                    <div id="tableView" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover" id="dataTable">
                                <thead>
                                    <tr id="tableHeaders">
                                        <!-- 动态生成表头 -->
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    <!-- 动态生成表格内容 -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 卡片视图 -->
                    <div id="cardView">
                        <div class="row" id="cardContainer">
                            <!-- 动态生成卡片 -->
                        </div>
                    </div>
                </div>

                <!-- 加载状态 -->
                <div id="loadingSpinner" class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <div class="mt-2">正在加载数据...</div>
                </div>

                <!-- 分页控件 -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="pagination-info text-muted" id="paginationInfo">
                        <!-- 显示当前页面信息 -->
                    </div>
                    <nav aria-label="Data pagination">
                        <ul class="pagination mb-0" id="paginationControls">
                            <!-- 动态生成分页控件 -->
                        </ul>
                    </nav>
                    <div style="width: 150px;"></div> <!-- 占位符保持居中 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 数据详情模态框 -->
    <div class="modal fade" id="dataDetailModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">数据详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="dataDetailContent">
                        <!-- 动态填充详情内容 -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/final_datasets.js') }}"></script>
</body>
</html> 